<template>
  <div class="page-layout">
    <el-form :model="formInline" ref="form" label-width="90px" class="form-inline" label-suffix="：">
      <el-row :gutter="10">
        <el-col :lg="6" :xl="6"><el-form-item label="保单号">
            <el-input v-model="formInline.insureNum" placeholder="请输入保单号"></el-input> </el-form-item></el-col>
        <el-col :lg="6" :xl="6"><el-form-item label="订单号">
            <el-input v-model="formInline.orderNum" placeholder="请输入订单号"></el-input> </el-form-item></el-col>
        <el-col :lg="6" :xl="6"><el-form-item label="箱号">
            <el-input v-model="formInline.containerNumber" placeholder="请输入箱号"></el-input> </el-form-item></el-col>
        <!-- <el-col :lg="6" :xl="6"><el-form-item label="运单号">
            <el-input v-model="formInline.tagInvoiceWaybill" placeholder="请输入运单号"></el-input> </el-form-item></el-col> -->
        <el-col :lg="8" :xl="8"><el-form-item label="投保日期">
            <el-date-picker style="width:100%" v-model="date" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker></el-form-item></el-col>
        <el-col :lg="6" :xl="4">
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button type="primary" :disabled="!tableData.length" @click="downloadExcel">导出</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table ref="table" border :data="tableData" :height="tableHeight" :style="{ width: '100%' }">
      <el-table-column prop="insureNum" label="保单号" width="140">
      </el-table-column>
      <!-- <el-table-column prop="orderNum" label="订单号" width="200">
      </el-table-column> -->
      <el-table-column prop="payTime" label="投保日期" width="150">
      </el-table-column>
      <el-table-column prop="templateName" label="投保名称" width="140">
      </el-table-column>
      <el-table-column prop="containerNumber" label="集装箱号" width="140">
      </el-table-column>
      <!-- <el-table-column prop="containerNumber" label="出险箱号" width="120">
      </el-table-column> -->
      <!-- <el-table-column prop="tagInvoiceWaybill" label="运单号" width="120">
      </el-table-column> -->
      <el-table-column prop="totalFee" label="保险金额（元）" width="90">
      </el-table-column>
      <el-table-column prop="insureFee" label="保费（元）" width="90">
      </el-table-column>
      <el-table-column prop="goodsName" label="货物名称" width="120">
      </el-table-column>
      <el-table-column prop="orderStatus" label="订单状态" width="120">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.orderStatus === '2'">支付成功</el-tag>
          <el-tag v-if="scope.row.orderStatus === '3'" type="success">投保成功</el-tag>
          <el-tag v-if="scope.row.orderStatus === '4'" type="danger">投保失败</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="orderStatusRemark" label="订单失败原因" width="120">
      </el-table-column>
      <el-table-column prop="startTime" label="启运日期" width="120">
      </el-table-column>
      <el-table-column prop="startPlace" label="启运地" width="120">
      </el-table-column>
      <el-table-column prop="endPlace" label="目的地" width="120">
      </el-table-column>
      <el-table-column prop="applyModifyStatus" label="批复状态" width="100" fixed="right">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.applyModifyStatus === '1'">批复正在审核中</el-tag>
          <el-tag v-if="scope.row.applyModifyStatus === '2'" type="success">批复成功</el-tag>
          <el-tag v-if="scope.row.applyModifyStatus === '3'" type="danger">批复失败</el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template slot-scope="scope" v-if="scope.row.applyModifyStatus !== '1'">
          <el-button @click="reportingCase(scope.row)" v-if="scope.row.orderStatus === '3'" :disabled="!(scope.row.orderStatus === '3' && scope.row.reportStatus === '0')" type="text"
            size="small">{{scope.row.reportStatus === "6"? "理赔种": scope.row.reportStatus === "7"? "理赔完成": "报案"}}</el-button>
          <a style="margin-left: 12px" :href="scope.row.insureUrl" v-if="!!scope.row.insureUrl && scope.row.orderStatus !== '2'" download="保单">
            <el-button type="text" size="small">下载</el-button>
          </a>
          <el-button @click="copyClick(scope.row)" type="text" size="small">复制</el-button>
          <el-button @click="batchOrder(scope.row)" v-if="scope.row.modifyStatus === '1' &&
      scope.row.reportStatus === '0' &&
      scope.row.orderStatus != '4'
      " type="text" size="small">批单</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination style="margin-top: 10px" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>

    <el-dialog title="新增理赔" :visible.sync="settlementOfClaimDialog" width="1200px" v-loading="loading">
      <el-form :model="ruleForm" ref="ruleForm" label-width="110px">
        <el-row :gutter="10">
          <el-col :span="7"><el-form-item label="开户名称" prop="accountName" :rules="[{ required: true, message: '请输入开户名称' }]">
              <el-input placeholder="请输入开户名称" v-model="ruleForm.accountName"></el-input> </el-form-item></el-col>
          <el-col :span="1">
            <el-button @click="insurerClick" native-type="button" type="text" size="small">常用</el-button>
          </el-col>
          <el-col :span="8"><el-form-item label="开户类型" prop="accountType">
              <el-select v-model="ruleForm.accountType" placeholder="请选择开户类型">
                <el-option v-for="item in accountTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select> </el-form-item></el-col>
          <el-col :span="8"><el-form-item label="地区" prop="areaName" :rules="[{ required: true, message: '请选择地区' }]">
              <el-select @change="areaChange" filterable v-model="ruleForm.areaName" placeholder="请选择地区">
                <el-option v-for="item in areaList" :key="item.areaId" :label="item.areaName" :value="item.areaId"></el-option>
              </el-select> </el-form-item></el-col>
          <el-col :span="8"><el-form-item label="地区银行" prop="bankName" :rules="[{ required: true, message: '请选择地区银行' }]">
              <el-select v-model="ruleForm.bankName" filterable @change="bankChange" placeholder="请选择地区银行">
                <el-option v-for="item in bankList" :key="item.bankId" :label="item.bankName" :value="item.bankId"></el-option>
              </el-select> </el-form-item></el-col>

          <el-col :span="8"><el-form-item label="分支行名称" prop="bankBranchName" :rules="[{ required: true, message: '请选择分支行' }]">
              <el-select filterable v-model="ruleForm.bankBranchName" placeholder="请选择分支行">
                <el-option v-for="item in bankBranchList" :key="item.bankBranchId" :label="item.bankBranchName" :value="item.bankBranchId"></el-option>
              </el-select> </el-form-item></el-col>

          <el-col :span="8"><el-form-item label="卡号" prop="accountNumber" :rules="[
      { required: true, message: '请输入卡号' },
      {
        validator: (rule, value, cb) =>
          checkBankNumber(rule, value, cb),
        message: '卡号只能为数字',
      },
    ]">
              <el-input placeholder="请输入卡号" v-model="ruleForm.accountNumber"></el-input> </el-form-item></el-col>

          <el-col :span="8"><el-form-item label="联系方式" prop="contactPhone" :rules="[
      { required: true, message: '请输入联系地址' },
      {
        validator: (rule, value, cb) =>
          phoneNumberRight(rule, value, cb),
        message: '请输入正确的手机号码',
      },
    ]">
              <el-input placeholder="请输入联系方式" v-model="ruleForm.contactPhone"></el-input> </el-form-item></el-col>

          <el-col :span="8"><el-form-item label="证件号码" prop="certificateNumber" :rules="[
      { required: true, message: '请输入证件号码' },
      // {
      //   validator: (value, rule) => checkDocument(value, rule),
      //   message: '请输入正确的证件号码',
      // },
    ]">
              <el-input placeholder="请输入证件号码" v-model="ruleForm.certificateNumber"></el-input> </el-form-item></el-col>

          <el-col :span="8"><el-form-item label="货物名称" prop="goodsName" :rules="[{ required: true, message: '请输入货物名称' }]">
              <el-input placeholder="请输入货物名称" readonly v-model="ruleForm.goodsName"></el-input> </el-form-item></el-col>

          <el-col :span="8"><el-form-item label="出险箱号" prop="containerNumber" :rules="[{ required: !isHighway, message: '请输入出险箱号' }]">
              <el-select v-model="ruleForm.containerNumber" multiple collapse-tags placeholder="请选择">
                <el-option v-for="(item, index) in containerNumberList" :key="index" :label="item" :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8"><el-form-item label="损失金额" prop="lossFee" :rules="[{ required: true, message: '请输入损失金额' }, {
      validator: (rule, value, cb) => checkLossFee(rule, value, cb),
    },]">
              <el-input placeholder="请输入损失金额" v-model="ruleForm.lossFee"></el-input> </el-form-item></el-col>

          <el-col :span="8"><el-form-item label="现场联系人" prop="sceneName" :rules="[{ required: true, message: '请输入现场联系人' }]">
              <el-input placeholder="请输入现场联系人" readonly v-model="ruleForm.sceneName"></el-input>
            </el-form-item></el-col>

          <el-col :span="8"><el-form-item label="联系方式" prop="scenePhone" :rules="[{ required: true, message: '请输入联系方式' }]">
              <el-input placeholder="请输入联系方式" readonly v-model="ruleForm.scenePhone"></el-input>
            </el-form-item></el-col>

          <el-col :span="16"><el-form-item label="出险地址" prop="reportPlace" :rules="[{ required: true, message: '请输入出险地址' }]">
              <el-input placeholder="请输入出险地址" v-model="ruleForm.reportPlace"></el-input> </el-form-item></el-col>

          <el-col :span="24"><el-form-item label="出险原因" prop="reportCause" :rules="[{ required: true, message: '请输入出险原因' }]">
              <el-input placeholder="请输入出险原因" type="textarea" v-model="ruleForm.reportCause"></el-input>
            </el-form-item></el-col>

          <el-col :span="24"><el-form-item label="损失情况说明" prop="explain" :rules="[{ required: true, message: '请输入损失情况说明' }]">
              <el-input placeholder="请输入损失情况说明" type="textarea" v-model="ruleForm.explain"></el-input>
            </el-form-item></el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="settlementOfClaimDialog = false">取 消</el-button>
        <el-button type="primary" @click="addSettlementOfClaim">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="选择账户信息" :visible.sync="insureShow" width="1200px" class="dialog">
      <div v-if="!accountList.length">
        <div>您还未添加账户信息，点击可添加常用账户信息</div>
        <el-button type="primary" size="small" @click="() => {
      $router.push(`/bankAccount?orderNum=${orderNum}`);
      setInsuranceDataToCache();
    }
      ">添加投保人</el-button>
      </div>
      <el-form label-width="100px">
        <el-card class="box-card" style="margin-top: 10px" shadow="never" v-for="(item, index) in accountList" :key="index">
          <div class="account-info">
            <el-radio-group v-model="item.isTrue" @input="insureNameChange(item)">
              <el-radio :label="true">{{ item.insureName }}</el-radio>
            </el-radio-group>
            <el-row :gutter="5">
              <el-col :span="8">
                <el-form-item label="开户名称">
                  {{ item.accountName }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="开户类型">
                  {{ item.accountType == "1" ? "企业" : "个人" }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="地区">
                  {{ item.areaName }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="地区银行">
                  {{ item.bankName }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="分支行名称">
                  {{ item.bankBranchName }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="卡号">
                  {{ item.accountNumber }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="联系方式">
                  {{ item.contactPhone }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="证件号码">
                  {{ item.certificateNumber }}
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="() => (insureShow = false)">取 消</el-button>
        <el-button type="primary" @click="insureSure">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
const regExp = /^\d+$/;
const reg5 = /^\d*\.?\d+$/;
const reg =
  /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i;

import { AccountTypeList } from "@/utils/options";
import moment from "moment";
export default {
  data() {
    return {
      loading: false,
      insureShow: false,
      accountList: [],
      ruleForm: {
        accountName: "",
        accountNumber: "",
        accountType: "1",
        areaName: "",
        bankName: "",
        bankBranchName: "",
        contactPhone: "",
        certificateNumber: "",

        goodsName: "",
        containerNumber: "",
        lossFee: "",
        sceneName: "",
        scenePhone: "",
        reportPlace: "",
        reportCause: "",
        explain: "",
      },
      containerNumberList: [],
      isHighway: false,
      settlementOfClaimDialog: false,
      pageSize: 10,
      total: 0,
      pageNum: 1,
      tableHeight: 0,
      currentPage4: 4,
      isShow: false,
      formInline: {
        insureNum: "",
        orderNum: "",
        containerNumber: "",
        // tagInvoiceWaybill: "",
      },
      date: "",
      tableData: [],
      bankBranchList: [],
      areaList: [],
      bankList: [],
      accountTypeList: AccountTypeList,
    };
  },
  methods: {
    checkLossFee(rule, value, cb) {
      if (!reg5.test(value)) {
        cb("请输入数字");
      }
      cb();
    },
    downloadExcel() {
      console.log("this.formInline", this.formInline);
      const params = {
        ...this.formInline,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      if (this.date) {
        params.beginTime = moment(this.date[0]).format("YYYY-MM-DD");
        params.endTime = moment(this.date[1]).format("YYYY-MM-DD");
      } else {
        params.beginTime = "";
        params.endTime = "";
      }
      const date = moment().format("YYYY-MM-DD HH:mm:ss");
      const headers = {
        responseType: "blob",
      };
      // 发送请求获取Excel文件流
      this.$post("/warranty/insure/exportAleryPay", params, headers)
        .then((response) => {
          // 创建一个blob URL来下载文件
          const url = window.URL.createObjectURL(new Blob([response]));
          const link = document.createElement("a");
          link.href = url;
          link.setAttribute("download", `保单${date}.xls`); // 设置文件名
          document.body.appendChild(link);
          link.click();
        })
        .catch((error) => {
          console.error("下载失败", error);
          // 处理下载失败的情况
        });
    },
    batchOrder(item) {
      this.$router.push({
        path: "/temp1",
        query: {
          orderNum: item.orderNum,
          insureInfoId: item.insureInfoId,
          templateName: item.templateName,
          batchOrder: true,
        },
      });
    },
    setInsuranceDataToCache() {
      localStorage.setItem(
        "reportingCaseData",
        JSON.stringify({
          ...this.getParams(),
          containerNumberList: this.containerNumberList,
        })
      );
    },
    insurerClick() {
      this.insureShow = true;
    },
    insureNameChange(item) {
      console.log(item, "item");
      this.accountList.forEach((a) => {
        if (a.bankAccountId === item.bankAccountId) {
          this.$set(item, "isTrue", !a.isTrue);
          item.isTrue = !a.isTrue;
        } else {
          this.$set(a, "isTrue", false);
          a.isTrue = false;
        }
      });
    },
    getApplicantList() {
      this.$get("/bank/account/list").then((res) => {
        if (res && res.code * 1 === 200) {
          this.accountList = res.data;
          this.accountList.forEach((item) => {
            this.$set(item, "isTrue", false);
          });
        } else {
          this.accountList = [];
        }
      });
    },
    insureSure() {
      this.accountList.forEach((item) => {
        if (item.isTrue) {
          this.ruleForm.accountType = item.accountType;
          this.ruleForm.certificateNumber = item.certificateNumber;
          this.ruleForm.areaName = this.areaList.find(
            (area) => area.areaName === item.areaName
          ).areaId;
          this.ruleForm.bankName = this.bankList.find(
            (area) => area.bankName === item.bankName
          ).bankId;
          this.ruleForm.bankBranchName = item.bankBranchName;
          this.ruleForm.accountName = item.accountName;
          this.ruleForm.accountNumber = item.accountNumber;
          this.ruleForm.contactPhone = item.contactPhone;
        }
      });
      this.insureShow = false;
    },
    checkBankNumber(rule, value, cb) {
      if (!regExp.test(value)) {
        cb("卡号只能为数字");
      }
      cb();
    },
    phoneNumberRight(rule, value, cb) {
      if (!/^1[3-9]\d{9}$/.test(value)) {
        cb("请输入正确的联系方式");
      }
      cb();
    },
    checkDocument(value) {
      return reg.test(value);
    },
    getBankList() {
      return this.$get("/bank/account/bank").then((res) => {
        this.bankList = res.data;
      });
    },
    getAreaList() {
      return this.$get("/bank/account/area").then((res) => {
        this.areaList = res.data;
      });
    },
    areaChange() {
      this.ruleForm.bankBranchName = "";
      this.ruleForm.bankName = "";
      this.getBankBranchList();
    },
    bankChange() {
      this.ruleForm.bankBranchName = "";
      this.getBankBranchList();
    },
    getBankBranchList() {
      if (!this.ruleForm.areaName || !this.ruleForm.bankName) {
        return;
      }
      const params = {
        areaId: this.ruleForm.areaName,
        bankId: this.ruleForm.bankName,
      };
      console.log(params, "params");
      return this.$get("/bank/account/bankbranch", params).then((res) => {
        this.bankBranchList = res.data;
        return res.data;
      });
    },
    reportingCase(row) {
      const accountData = localStorage.getItem("accountData");
      if (accountData) {
        this.setDetail(JSON.parse(accountData));
      }
      this.orderNum = row.orderNum;
      this.settlementOfClaimDialog = true;
      this.ruleForm.goodsName = row.goodsName;
      this.ruleForm.sceneName = row.contactName;
      this.ruleForm.scenePhone = row.contactPhone;

      this.containerNumberList = row.containerNumber
        ? row.containerNumber.split(";")
        : [];
      this.ruleForm.containerNumber = "";
      this.ruleForm.lossFee = "";
      this.ruleForm.reportPlace = "";
      this.ruleForm.reportCause = "";
      this.ruleForm.explain = "";
      this.isHighway = row.templateName.includes("公路");
    },
    getParams() {
      const params = {
        orderNum: this.orderNum,
        frontReportInsure: {
          goodsName: this.ruleForm.goodsName, // String 货物名称
          containerNumber: this.ruleForm.containerNumber
            ? this.ruleForm.containerNumber.join(";")
            : "", // String 出险箱号
          reportPlace: this.ruleForm.reportPlace, // String 出险地点
          reportCause: this.ruleForm.reportCause, // String 出险原因
          sceneName: this.ruleForm.sceneName, // String 现场联系人
          scenePhone: this.ruleForm.scenePhone, // String 联系方式
          lossFee: this.ruleForm.lossFee, // BigDecimal 损失金额
          explain: this.ruleForm.explain, // String 情况说明
        },

        frontReportInsureAccount: {
          accountType: this.ruleForm.accountType, //String**账户类型（1企业 2个人）  （必须）
          certificateNumber: this.ruleForm.certificateNumber, //String**证件号码  （必须）
          areaName: this.ruleForm.areaName, //String**地区名称  （必须）
          bankName: this.ruleForm.bankName, //String**银行名称  （必须）
          bankBranchName: this.ruleForm.bankBranchName, //String**支行名称  （必须）
          accountName: this.ruleForm.accountName, //String**开户名称  （必须）
          accountNumber: this.ruleForm.accountNumber, //String**账号  （必须）
          contactPhone: this.ruleForm.contactPhone, //String**收款人联系方式  （必须）
        },
      };
      return params;
    },
    getAccountData() {
      const params = {
        frontReportInsure: {
          goodsName: "", // String 货物名称
          containerNumber: "", // String 出险箱号
          reportPlace: "", // String 出险地点
          reportCause: "", // String 出险原因
          sceneName: "", // String 现场联系人
          scenePhone: "", // String 联系方式
          lossFee: "", // BigDecimal 损失金额
          explain: "", // String 情况说明
        },
        frontReportInsureAccount: {
          accountType: this.ruleForm.accountType, //String**账户类型（1企业 2个人）  （必须）
          certificateNumber: this.ruleForm.certificateNumber, //String**证件号码  （必须）
          areaName: this.ruleForm.areaName, //String**地区名称  （必须）
          bankName: this.ruleForm.bankName, //String**银行名称  （必须）
          bankBranchName: this.ruleForm.bankBranchName, //String**支行名称  （必须）
          accountName: this.ruleForm.accountName, //String**开户名称  （必须）
          accountNumber: this.ruleForm.accountNumber, //String**账号  （必须）
          contactPhone: this.ruleForm.contactPhone, //String**收款人联系方式  （必须）
        },
      };
      return params;
    },
    addSettlementOfClaim() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (this.loading) {
            return;
          }
          this.loading = true;
          const url = "/warranty/insure/report";
          const message = "操作成功";
          this.$post(url, this.getParams())
            .then((res) => {
              if (res && res.code * 1 === 200) {
                localStorage.setItem(
                  "accountData",
                  JSON.stringify(this.getAccountData())
                );
                this.$message.success(message);
                this.settlementOfClaimDialog = false;
                this.getTableData();
                // this.$router.push({
                //   path: '/settlementOfClaim',
                // })
              }
            })
            .finally(() => {
              this.loading = false;
            });
        }
      });
    },
    copyClick(item) {
      this.$router.push({
        path: "/temp1",
        query: {
          orderNum: item.orderNum,
          insureInfoId: item.insureInfoId,
          templateName: item.templateName,
        },
      });
    },
    trackClick() {},
    more() {
      this.isShow = !this.isShow;
      this.setTableHeight();
    },
    onSubmit() {
      this.pageNum = 1;
      this.getTableData();
    },
    handleSizeChange(val) {
      this.pageNum = 1;
      this.pageSize = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getTableData();
    },
    setTableHeight() {
      this.$nextTick(() => {
        const bodyHeight = window.innerHeight;
        const queryHeight =
          this.$refs.form &&
          this.$refs.form.$el &&
          this.$refs.form.$el.offsetHeight;
        this.tableHeight = bodyHeight - queryHeight - 210 + "px";
      });
    },
    getTableData() {
      const params = {
        ...this.formInline,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      if (this.date) {
        params.beginTime = moment(this.date[0]).format("YYYY-MM-DD");
        params.endTime = moment(this.date[1]).format("YYYY-MM-DD");
      } else {
        params.beginTime = "";
        params.endTime = "";
      }
      this.$get("/warranty/insure/aleryPay", params).then((res) => {
        if (res) {
          this.tableData = res.rows;
          this.total = res.total;
        } else {
          this.tableData = [];
          this.total = 0;
        }
      });
    },
    setDetail(res) {
      console.log("ddd");
      this.ruleForm.goodsName = res.frontReportInsure.goodsName; // String 货物名称
      this.containerNumber = res.frontReportInsure.containerNumber; // String 出险箱号
      this.ruleForm.reportPlace = res.frontReportInsure.reportPlace; // String 出险地点
      this.ruleForm.reportCause = res.frontReportInsure.reportCause; // String 出险原因
      this.ruleForm.sceneName = res.frontReportInsure.sceneName; // String 现场联系人
      this.ruleForm.scenePhone = res.frontReportInsure.scenePhone; // String 联系方式
      this.ruleForm.lossFee = res.frontReportInsure.lossFee; // BigDecimal 损失金额
      this.ruleForm.explain = res.frontReportInsure.explain; // String 情况说明

      this.ruleForm.accountType = res.frontReportInsureAccount.accountType; //String**账户类型（1企业 2个人）  （必须）
      this.ruleForm.certificateNumber =
        res.frontReportInsureAccount.certificateNumber; //String**证件号码  （必须）
      this.ruleForm.areaName = res.frontReportInsureAccount.areaName; //String**地区名称  （必须）
      this.ruleForm.bankName = res.frontReportInsureAccount.bankName; //String**银行名称  （必须）
      this.ruleForm.bankBranchName =
        res.frontReportInsureAccount.bankBranchName; //String**支行名称  （必须）
      this.ruleForm.accountName = res.frontReportInsureAccount.accountName; //String**开户名称  （必须）
      this.ruleForm.accountNumber = res.frontReportInsureAccount.accountNumber; //String**账号  （必须）
      this.ruleForm.contactPhone = res.frontReportInsureAccount.contactPhone; //String**收款人联系方式  （必须）
    },
  },
  mounted() {
    if (this.$route.query.getReportingCaseDataFromCache) {
      const reportingCaseData = localStorage.getItem("reportingCaseData");
      this.setDetail(JSON.parse(reportingCaseData));
      this.settlementOfClaimDialog = true;
    }
    this.getApplicantList();
    this.getBankList();
    this.getAreaList();
    this.setTableHeight();
    window.addEventListener("resize", this.setTableHeight);
    this.getTableData();
  },
};
</script>
<style scoped lang="less">
.time {
  /deep/.el-form-item__label {
    line-height: 20px;
  }
}
</style>